<template>
	<view class="login">
		<image class="logo" :src="web_host+'/static/images/logo.png'" mode="widthFix"></image>
		<view class="form">
			<!-- #ifdef MP-WEIXIN -->
			<c-button type="success" round block size="medium" open-type="getPhoneNumber"
				@getphonenumber="getPhoneNumber">
				<view class="icon-wrap">
					<uni-icons type="weixin" color="#fff" size="20"></uni-icons>
				</view>
				<text class="btn-label">微信授权登录1</text>
			</c-button>
			<!-- #endif -->

			<!-- #ifdef H5 -->
			<c-button :style="{backgroundColor: themeColor.theme}" round block size="medium" @click="authorization">
				<view class="icon-wrap">
					<uni-icons type="weixin" color="#fff" size="20"></uni-icons>
				</view>
				<text class="btn-label">微信授权登录2</text>
			</c-button>
			<!-- #endif -->

			<c-button type="default" round block size="medium" @click="pageRoute('/pages/users/login/pass_login')">
				<text class="btn-login">账号密码登录</text>
			</c-button>

			<view class="protocol" @click="isChecked = !isChecked">
				<uni-icons :type="isChecked ? 'checkbox-filled' : 'circle'" size="24"
					:color="isChecked ? themeColor.theme : '#cdd2d9'"></uni-icons>
				已阅读并同意
				<text class="lk" @tap.stop="pageRoute('/pages/service/agreement/agreement?type=user')">《用户协议》</text>
				和
				<text class="lk"
					@click.stop="pageRoute('/pages/service/agreement/agreement?type=privacy')">《隐私协议》</text>
			</view>
		</view>
		<company-info></company-info>
	</view>
</template>

<script setup>
	import request from '@/utils/request';
	import cache from '@/utils/cache';
	import {
		ref,
		reactive,
		toRefs,
		inject
	} from 'vue';
	import {
		onLoad,
		onShow,
		onPullDownRefresh,
		onReachBottom,
	} from '@dcloudio/uni-app';

	const web_host = inject('web_host');

	const state = reactive({
		themeColor: JSON.parse(cache.get('themeColor')),
		isChecked: false,
		invite_code: '',
	});

	onLoad((opt) => {
		if (opt.hasOwnProperty('invite_code')) {
			cache.set('invite_code', opt.invite_code);
			state.invite_code = opt.invite_code //是否扫推广码进入
		} else {
			state.invite_code = cache.get('invite_code') || state.invite_code;
		}
		if (opt.hasOwnProperty('code')) {
			mpLogin(opt.code)
		}
	});

	onShow(() => {});

	onPullDownRefresh((e) => {
		console.log("下拉刷新", e);
	});

	onReachBottom((e) => {
		console.log("上拉加载更多", e);
	});

	function authorization() {
		if (!state.isChecked) {
			uni.showToast({
				title: '必须阅读并同意用户协议和隐私政策',
				icon: 'none',
			})
			return;
		}

		// #ifdef H5
		location.href = web_host + '/api/wxauth/getAuthCode?type=login&scope=snsapi_userinfo&invite_code=' + state
			.invite_code;
		// #endif
	}

	function mpLogin(code) {
		request.get('wxauth/mpLogin', {
			code: code,
			invite_code: state.invite_code,
			store_id: state.store_id,
		}).then(res => {
			console.log('微信登录', res);
			if (res.token) {
				if (res.code === 1) {
					cache.set('LOGIN_STATUS_TOKEN', res.token);
					cache.set('isRefreshing', true);
					uni.showToast({
						title: res.msg,
						icon: 'success'
					})
					uni.switchTab({
						url: '/pages/tabbar/my/my'
					})
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'error'
					})
				}
			} else {
				// #ifdef H5
				location.href = web_host + '/api/wxauth/getAuthCode?type=login&invite_code=' + state.invite_code;
				// #endif
			}
		})
	}

	function getPhoneNumber(e) {}

	function pageRoute(url) {
		uni.navigateTo({
			url
		});
	};

	function pageTabRoute(url) {
		uni.switchTab({
			url
		});
	};

	const {
		themeColor,
		isChecked,
		invite_code,
	} = toRefs(state);
</script>

<style lang="scss">
	page,
	.login {
		height: 100%;
		background-color: $bg-inverse-color;
	}

	.login {
		@include f-center($direction: column);
		padding: $margin-24 10%;
		box-sizing: border-box;

		.logo {
			margin-top: 100rpx;
			width: 248rpx;
			height: 248rpx;
		}

		.form {
			flex: 1;
			width: 100%;
			margin-top: 180rpx;

			.icon-wrap {
				height: 40rpx;
				line-height: 40rpx;
			}

			.btn-label {
				margin-left: $margin-12;
			}

			.protocol {
				@include f-center;
				margin-top: $margin-32;
				font-size: $font-24;
				color: $tips-color;
				line-height: 1;

				.lk {
					font-size: $font-24;
					color: $primary-color;
				}
			}
		}
	}
</style>